<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        html,
        body,
        #app,
        .el-container{
            height: 100%;
        }

        .aside {
            width: 272px;
            background-color: #F5F4FE;
            overflow: hidden;
            border-right: 1px cornsilk;
        }
        .el-aside {

            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            border-right: 1px cornsilk;
        }


        .el-header {

            height: 500px;
            background-color: #C1CDCD;
        }



        .el-main {
            padding: 0px;

        }
        .el-footer {

            background-color: rgb(166, 144, 128);
        }

        .header-img {
            width: 120px;
            margin-top: 18px;
        }
        .footer-img {
            width: 100px;
            margin-top: 20px;
        }
        .homeWrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .main_container {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app" class="homeWrap">
        <el-container class="main_container">
            <el-header >
                <el-container >
                    <div>
                    <el-image src="img/logo.png"  class="header-img"></el-image>
                    </div>

                    <el-menu
                            class="el-menu-demo"
                            mode="horizontal"
                            background-color="#C1CDCD"
                            text-color="#fff"
                            active-text-color="#242256"
                            style="margin-left: auto"
                    >
                        <el-submenu index="1">
                            <template slot="title">用户中心</template>
                            <el-menu-item index="1-1">查看</el-menu-item>
                            <el-menu-item index="1-2">修改</el-menu-item>
                            <el-menu-item index="1-3">退出</el-menu-item>

                        </el-submenu>
                    </el-menu>

                </el-container>

            </el-header>
            <el-container>
                <div class="aside">
                <el-aside width="300px" boder-right="1px cornsilk">
                    <!--左侧导航菜单 start -->

                    <el-menu  background-color="#F5F4FE" text-color="#8C8ABC" class="el-menu-vertical-demo" >

                        <el-submenu index="1">

                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span>灵魂测试问题管理</span>
                            </template>
                            <el-menu-item index="1-1" @click="soulTest">查看问题列表</el-menu-item>
                            <el-menu-item index="1-2" @click="questionnaire">问卷管理</el-menu-item>
                            <el-menu-item index="1-3" @click="questions">问题管理</el-menu-item>
                            <el-menu-item index="1-4" @click="options">选项管理</el-menu-item>
                            <el-menu-item index="1-5" @click="reportInfo">报告详情管理</el-menu-item>

                        </el-submenu>


                        <el-submenu index="2">

                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span>用户注册统计展示</span>
                            </template>
                            <el-menu-item index="2-1" @click="city">用户地区分布</el-menu-item>
                            <el-menu-item index="2-2" @click="age">用户年龄段分布</el-menu-item>
                            <el-menu-item index="2-3" @click="gender">用户性别分布</el-menu-item>
                            <el-menu-item index="2-4" @click="profession">用户行业top10</el-menu-item>

                        </el-submenu>

                        <el-menu-item index="3" >
                            <i class="el-icon-document"></i>
                            <span slot="title"  @click="userLocation">用户管理及位置</span>
                        </el-menu-item>

                        <el-menu-item index="5" >
                            <i class="el-icon-document"></i>
                            <span slot="title"  @click="logs" >查看日志</span>
                        </el-menu-item>

                        <el-menu-item index="4" >
                            <i class="el-icon-sunny"></i>
                            <span slot="title"  @click="weatherForecast" >天气预报</span>
                        </el-menu-item>

                        <el-menu-item index="6" >
                            <i class="el-icon-chat-dot-square"></i>
                            <span slot="title"  @click="advice" >反馈</span>
                        </el-menu-item>

                    </el-menu>
                    <!--左侧导航菜单 end -->
                </el-aside>
                </div>


                <el-container>
                    <el-main  >
                    <iframe :src="iframeSrc" frameborder="false" style="top:80px;left: 120px; width: 100%;height:700px"></iframe>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>

    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data:{
            iframeSrc: "welcome.html",
        },
        methods:{
            userStatistics:function () {
                this.iframeSrc="pie-simple.html"
            },
            soulTest:function () {
                this.iframeSrc="soulQuestionList.html"
            },
            questionnaire:function(){
                this.iframeSrc="questionnaire.html"
            },
            questions:function(){
                this.iframeSrc="questions.html"
            },
            options:function(){
                this.iframeSrc="options.html"
            },
            reportInfo:function(){
                this.iframeSrc="reportInfo.html"
            },
            userLocation:function () {
                this.iframeSrc="users_location.html"
            },

            age:function () {
                this.iframeSrc = "age.html"
            },
            city:function () {
              this.iframeSrc = "city.html"
            },
            gender:function () {
                this.iframeSrc = "gender.html"
            },
            profession:function () {
                this.iframeSrc = "profession.html"
            },
            weatherForecast: function () {
                this.iframeSrc = "weather_forecast.html"
            },
            logs: function () {
                this.iframeSrc = "logs.html"
            },
            advice:function () {
                this.iframeSrc = "advice.html"
            }

        }
    })
</script>
</html>